<template>
  <div>
    <div class="bookr">
      <div @click="fh">
        <svg
          t="1700912494612"
          class="fh"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3726"
          width="48"
          height="48"
        >
          <path
            d="M700.371228 394.525472 174.028569 394.525472l255.952416-227.506551c12.389168-11.011798 13.505595-29.980825 2.492774-42.369993-11.011798-12.386098-29.977755-13.506619-42.367947-2.492774L76.425623 400.975371c-6.960529 5.496178-11.434423 14.003945-11.434423 23.561625 0 0.013303 0.001023 0.026606 0.001023 0.039909 0 0.01228-0.001023 0.025583-0.001023 0.037862 0 0.473791 0.01535 0.946558 0.037862 1.418302 0.001023 0.016373 0.001023 0.032746 0.001023 0.049119 0.39295 8.030907 3.992941 15.595186 10.034541 20.962427l315.040163 280.028764c5.717212 5.083785 12.83533 7.580652 19.925818 7.580652 8.274454 0 16.514115-3.403516 22.442128-10.07445 11.011798-12.387122 9.896394-31.357172-2.492774-42.367947l-256.128425-227.665163 526.518668 0c109.219517 0 198.075241 88.855724 198.075241 198.075241s-88.855724 198.075241-198.075241 198.075241L354.324888 850.696955c-16.57449 0-30.011524 13.437034-30.011524 30.011524s13.437034 30.011524 30.011524 30.011524l346.046341 0c142.31631 0 258.098289-115.783003 258.098289-258.098289S842.686515 394.525472 700.371228 394.525472z"
            fill="#1296db"
            p-id="3727"
          ></path>
        </svg>
      </div>
      <div class="piang">
        <!-- <img  src="../assets/widget-order_01.png" />    -->
        <img class="tuu" :src="require('@/image/' + catc.img)" />
      </div>
      <div class="textcontainer">
        <div class="ha">{{ catc.name }}</div>
        <div class="book-text">{{ catc.remark }}</div>
        <br />
        <div class="additional-text">
          {{ catc.sex === 1 ? "男" : catc.sex === 0 ? "女" : "不限"
          }}<span class="age-range"> {{ catc.minage }}-{{ catc.maxage }}</span>
          <el-button
            class="butt"
            type="text"
            @click="dialogFormVisible = true"
            style="font-size: 25px"
            >立即预约</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div class="yu1">
        <svg
          t="1699703651618"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7143"
          width="40"
          height="40"
        >
          <path
            d="M512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m0 85.333333C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z"
            fill="#2c2c2c"
            p-id="7144"
          ></path>
          <path
            d="M520.96 232.106667c-62.293333 0-111.786667 17.92-147.626667 54.613333-36.693333 35.84-54.613333 84.48-54.613333 146.773333h90.453333c0-37.546667 7.68-67.413333 23.04-87.893333 17.066667-23.893333 45.226667-35.84 83.626667-35.84 30.72 0 54.613333 8.533333 71.68 25.6 16.213333 17.066667 24.746667 40.106667 24.746667 69.973333 0 22.186667-7.68 42.666667-23.04 62.293334l-14.506667 16.213333c-52.906667 46.933333-85.333333 81.92-97.28 105.813333-11.093333 22.186667-16.213333 49.493333-16.213333 81.066667v14.506667h91.306666v-14.506667c0-21.333333 4.266667-40.106667 13.653334-57.173333 7.68-15.36 19.626667-29.866667 34.986666-43.52 40.96-34.986667 64.853333-57.173333 72.533334-66.56 20.48-27.306667 31.573333-62.293333 31.573333-104.106667 0-51.2-17.066667-92.16-50.346667-122.026667-34.133333-30.72-78.506667-45.226667-133.973333-45.226666z m-14.506667 499.2c-17.92 0-32.426667 5.12-43.52 17.066666-12.8 11.093333-18.773333 25.6-18.773333 43.52 0 17.066667 5.973333 31.573333 18.773333 43.52 11.093333 11.946667 25.6 17.92 43.52 17.92 17.066667 0 32.426667-5.973333 45.226667-17.066666 11.946667-11.946667 17.92-26.453333 17.92-44.373334 0-17.92-5.973333-32.426667-17.92-43.52-11.946667-11.946667-27.306667-17.066667-45.226667-17.066666z"
            fill="#2c2c2c"
            p-id="7145"
          ></path>
        </svg>
        <el-button type="text" @click="open" class="yuy1">预约须知</el-button>
      </div>
      <el-divider></el-divider>
      <div class="xq">
        <svg
          t="1699705198463"
          class="ico"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10172"
          width="40"
          height="40"
        >
          <path
            d="M501.973006 81.099336c-110.239789 0-214.772972 45.604889-294.697419 128.254759A455.249647 455.249647 0 0 0 116.305582 347.639372c-22.234981 52.782104-34.199671 107.961942-35.222704 164.164813-2.277847 111.94218 42.6317 218.305633 126.192709 299.708682a455.065821 455.065821 0 0 0 139.428197 92.680388 438.441536 438.441536 0 0 0 165.651407 36.02994h7.864566c108.873081 0 212.615012-44.917539 291.844116-126.424489a448.520008 448.520008 0 0 0 91.201786-135.77565 444.987348 444.987348 0 0 0 36.941079-161.767079v-2.501635l0.335683-2.277847v-1.486595l-0.223789-2.277847v-2.277846a438.033921 438.033921 0 0 0-130.069044-298.469853 437.722216 437.722216 0 0 0-300.739707-125.625245h-7.528883v-0.239773z m0-80.939487l9.015477-0.127879c277.24192 3.876336 502.293176 225.155158 510.613311 501.957493 0.231781 2.741409 0.231781 5.586719 0.231781 8.671803 0.335683 3.077091 0 5.8185-0.351668 8.66381-9.566956 267.331288-226.409972 502.293176-501.038362 502.293175h-9.35116C237.49502 1016.47911-4.987758 793.034335 0.598961 510.996948 5.618216 240.013113 224.267524 0.039962 501.973006 0.159849z m1.838262 768.033968c2.046066 2.733416 5.131149 4.443799 8.543923 4.555693a21.835359 21.835359 0 0 0 15.153675-6.841532c13.906854-11.397226 30.331327-31.690043 49.361338-61.326028l15.960912 9.119379c-46.052466 80.028348-95.190016 120.278299-146.8292 120.2783-19.717361 0-35.34259-5.594711-47.083491-16.768149a56.314765 56.314765 0 0 1-17.559401-42.296017c0-11.285332 2.509628-25.527868 7.872558-43.087269l63.49198-218.217716c6.154182-20.740394 9.231274-36.477517 9.231273-47.075499a24.145175 24.145175 0 0 0-8.887598-18.238759 33.784064 33.784064 0 0 0-23.489795-7.864566c-4.787474 0-10.366201 0.343675-16.528375 0.45557l5.594711-18.238759 154.589864-25.080291h27.014463L506.656578 722.021464c-4.795467 18.582434-7.305094 30.898791-7.305094 36.933087 0.471554 3.428759 1.942164 6.729638 4.459784 9.239266z m115.93041-465.927553a66.513124 66.513124 0 0 1-47.547054 19.605467 64.714824 64.714824 0 0 1-46.843718-19.605467 65.162401 65.162401 0 0 1-19.493572-47.315272 65.697895 65.697895 0 0 1 19.261791-47.658948 63.659822 63.659822 0 0 1 47.083492-19.725353c18.926109 0 35.006908 6.617744 47.882736 19.725353 12.883821 13.115602 19.493572 29.188408 19.493572 47.658948a63.220237 63.220237 0 0 1-19.837247 47.315272z"
            fill="#2c2c2c"
            p-id="10173"
          ></path></svg
        ><span class="xqz">套餐详情</span>
      </div>
      <el-divider></el-divider>
      <div class="biao">
        <el-table
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="Details"
          height="250"
          style="width: 100%; font-size: 20px"
        >
          <el-table-column prop="checkgroups.name" label="项目名称" width="320">
          </el-table-column>
          <el-table-column
            prop="checkgroups.remark"
            label="项目内容"
            width="160"
          >
          </el-table-column>
          <el-table-column prop="checkgroups.attention" label="项目解读">
          </el-table-column>
        </el-table>
      </div>
      <div>
        <!-- Form -->

        <el-dialog
          class="large-font"
          title="体检人信息"
          :visible.sync="dialogFormVisible"
        >
          <el-form :model="order" ref="order" :rules="rules">
            <el-form-item label="体检人" :label-width="formLabelWidth">
              <el-input v-model="identity.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-radio :disabled="true" v-model="member.sex" label="1"
                >男</el-radio
              >
              <el-radio :disabled="true" v-model="member.sex" label="2"
                >女</el-radio
              >
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input
                :readonly="true"
                v-model="member.phonenumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth">
              <el-input
                v-model="identity.idcard"
                @change="handleInputChange"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
              <el-input
                :readonly="true"
                v-model="member.birthday"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
              <el-input v-model="member.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="婚否" :label-width="formLabelWidth">
              <el-radio
                @change="handleRadioChange"
                v-model="member.isok"
                :label="0"
                >是</el-radio
              >
              <el-radio
                @change="handleRadioChange"
                v-model="member.isok"
                :label="1"
                >否</el-radio
              >
            </el-form-item>
            <el-form-item label="体检日期选择" :label-width="formLabelWidth">
              <el-date-picker
                v-model="order.orderdate"
                type="date"
                :picker-options="pickerOptions"
                placeholder="选择日期"
                @change="handleDateChange('order')"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 输入框的值
      Details: "",
      catc: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      identity: {
        idcard: "",
        name: "",
      },
      member: {
        idcard: "",
        name: "",
        sex: "",
        age: "",
        phonenumber: this.$store.state.name.phonenumber,
        birthday: "",
        delivery: false,
        isok: "",
        id: this.$store.state.name.id,
      },
      dateFalse: "1",
      order: {
        orderdate: "",
        membeid: null,
        setmealid: this.$store.state.setmealid,
      },
      rules: {
        orderdate: [
          { required: true, message: "请输入预约时间", trigger: "blur" },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          const currentDate = new Date();
          const today = new Date(
            currentDate.getFullYear(),
            currentDate.getMonth(),
            currentDate.getDate()
          );
          return time.getTime() < today.getTime();
        },
      },
      formLabelWidth: "120px",
    };
  },

  methods: {
    fh() {
      this.$router.go(-1); // 或者 window.history.back();
    },
    caa() {
      // 发送GET请求
      this.axios
        .get("/rear/catc", {
          params: { id: this.$store.state.setmealid },
        })
        .then((rep) => {
          console.log(rep.data);
          this.catc = rep.data;
          sessionStorage.setItem("exam", JSON.stringify(rep.data));
          this.$store.commit("memberexamination", rep.data);
        });
    },
    fetchData() {
      // 发送GET请求
      this.axios
        .get("/rear/BDetails", {
          params: { id: this.$store.state.setmealid },
        })
        .then((rep) => {
          this.Details = rep.data;
        });
    },
    open() {
      this.$alert(
        "<h6>尊敬的用户，感谢您选择我们的体检服务。为了确保您的体检顺利进行，请您仔细阅读以下预约须知</h6>" +
          "<h6>1.预约方式：请您提前通过我们的在线预约系统、电话预约或者到场预约等方式进行预约，以便我们为您安排合适的体检时间。</h6>" +
          "<h6>2.有效证件：在预约时，请务必提供有效的身份证明文件，如居民身份证、护照等。如果您代预约他人，请携带被预约人的有效证件和授权证明。</h6>" +
          "<h6>3.预约时间：请您根据自己的需求选择合适的体检日期和时间段，并提前预约，以免耽误您的时间。</h6>" +
          "<h6>4.取消预约：如有特殊情况无法按时参加体检，请提前通知我们，我们将为您取消预约或重新安排体检时间。未能提前通知或多次无故取消预约可能会影响您的信用等级。</h6>" +
          "<h6>5.空腹体检：一般来说，体检前需要至少8小时的禁食。请您根据具体项目要求注意饮食和服药等方面的限制，以保证体检结果的准确性。</h6>" +
          "<h6>6.准时到达：请务必按照预约的时间准时到达。如果您迟到或无法按时赴约，请提前告知对方并协商新的时间安排。</h6>" +
          "<h6>7.空腹体检：一般必要信息：根据具体情况，提供必要的个人信息或文件以完成预约流程。例如，预约医生时可能需要提供病历信息，预约场地时可能需要填写相关表格等。来说，体检前需要至少8小时的禁食。请您根据具体项目要求注意饮食和服药等方面的限制，以保证体检结果的准确性。</h6>" +
          "",
        "订单须知",
        {
          dangerouslyUseHTMLString: true,
          customClass: "custom-message-box", // 添加自定义的CSS类名
        }
      );
    },
    handleDateChange(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .get("/rear/LzNorderSetting", {
              params: { date: this.order.orderdate },
            })
            .then((req) => {
              if (req.data != "") {
                if (req.data.number == req.data.reservations) {
                  this.dateFalse = "2";
                } else {
                  this.dateFalse = "1";
                }
              } else {
                this.dateFalse = "3";
              }
            });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    submitForm() {
      if (this.dateFalse == "2") {
        this.$message({
          message: "预约人数已满 请联系客服拨打19026063473",
          type: "error",
        });
        return;
      }
      if (this.dateFalse == "3") {
        this.$message({
          message: "此时间暂未设置预约 请联系客服拨打19026063473",
          type: "error",
        });
        return;
      }
      this.order.membeid = this.member.id;
      this.axios.post("/rear/insert", this.order).then((res) => {
        if (res.data > 0) {
          this.$message({
            message: "预约成功 请等待工作人员通知",
            type: "success",
          });

          this.dialogFormVisible = false;
          return;
        }
        if (res.data == -1) {
          this.$message({
            message: "当天你已预约过该套餐",
            type: "error",
          });
          return;
        }
      });
    },

    handleInputChange() {
      this.axios.post("/rear/sfz", this.identity).then((res) => {
        if ((res.data.result.sex = "男")) {
          this.member.sex = "1";
        } else {
          this.member.sex = "2";
        }
        this.member.birthday = res.data.result.birthday;
        this.member.idcard = res.data.result.idcard;
        this.member.name = res.data.result.name;
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const birthYear = parseInt(this.member.birthday.substring(0, 4));
        this.member.age = currentYear - birthYear;
        if (res.data.code != 0) {
          this.$message({
            message: "姓名或者身份证号码错误!",
            type: "error",
          });
          return;
        }
      });
    },
    handleRadioChange() {
      // 在选项改变时触发 POST 请求逻辑，可以在这里编写你的 POST 请求代码
      this.axios.post("/rear/upmember", this.member);
    },
  },

  created() {
    this.fetchData(); // 在组件挂载完成后调用方法获取数据
    this.caa();
    this.addid();
  },
};
</script>

<style scoped>
.fh {
  transform: translate(1160px, -20px); /* 向右移动2px并向上移动2px */
}
.custom-message-box {
  width: 580px;
  height: 560px;
}
.butt {
  font-size: 20px;
  position: relative;
  right: -550px;
  bottom: 10px;
}
.divide {
  margin-top: 25px;
  border-top: 8px solid rgba(121, 119, 115, 0.404);
}
.ico {
  margin-top: -15px;
}
.xqz {
  color: rgba(46, 125, 156, 0.979);
  font-size: 25px;
}
.xq {
  margin-left: 120px;
  margin-top: 20px;
}

.divider {
  margin-top: 25px;
  border-top: 8px solid rgba(121, 119, 115, 0.404); /* 设置分割线的粗细和颜色 */
}
.yu1 {
  margin-left: 120px;
}
.icon {
  /* margin-left: 0px */
  margin-top: -20px;
}
.yuy1 {
  font-size: 25px; /* 自定义字体大小 */
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.dialog-header .close {
  cursor: pointer;
}

.dialog-content {
  padding: 150px;
}

.dialog-large {
  width: 800px;
}

.additional-text {
  color: rgb(223, 198, 59);
  margin-top: 5px;
  margin-left: 100px;
  font-size: 25px;
}

.age-range {
  color: rgb(223, 198, 59);
  font-size: 25px;
  margin-left: 100px;
}
.textcontainer {
  display: flex;
  flex-direction: column;
  text-align: justify;
  margin-left: 110px;
  margin-top: 15px;
}
.ha {
  position: relative;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
  font-size: 29px;
  margin-top: -10px;
  margin-left: 100px;
}
.book-text {
  margin-left: 100px;
  position: relative;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: gray;
  font-size: 25px;
}
.piang {
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.tuu {
  height: 500px; /* 容器的高度 */
  width: 70%;
}
</style>
